<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>人事管理系统 ——后台管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>
    <link href="fkjava.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="../css/css.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript" src="../js/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="../js/jquery.form.js"></script>

    <script src="../js/a/vue.js"></script>
    <script src="../js/a/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/a/index.js"></script>
    <script src="../js/a/axios-config.js"></script>
    <!--  <script type="text/javascript">-->

    <!--    $(document).ready(function () {-->

    <!--      /** 表单提交的校验 */-->
    <!--      $("#btn").click(function () {-->
    <!--        var title = $("#title").val();-->
    <!--        var file = $("#file").val();-->

    <!--        if ($.trim(title).length <= 2) {-->
    <!--          alert("请输入两个字符以上的标题");-->
    <!--          return;-->
    <!--        } else if (!file) {-->
    <!--          alert("请上传文档！");-->
    <!--          return;-->
    <!--        }-->

    <!--        //$("#documentForm").submit();-->

    <!--      })-->
    <!--    });-->


    <!--  </script>-->
</head>

<body>
<div id="addfile">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td width="15" height="32"><img src="../images/main_locleft.gif" width="15" height="32"></td>
            <td class="main_locbg font2"><img src="../images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：文档管理 &gt; 上传文档
            </td>
            <td width="15" height="32"><img src="../images/main_locright.gif" width="15" height="32"></td>
        </tr>
    </table>

    <table width="100%" height="90%" border="0" cellpadding="10" cellspacing="0" class="main_tabbor">
        <tr valign="top">
            <td>


                <!-- 隐藏表单，flag表示添加标记 -->
                <input type="hidden" name="flag" value="2">
                <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">

                    <tr>
                        <td class="font3 fftd">


                            文档标题：<input type="text" name="title" size="30" id="title" v-model="formData.title"/></td>
                    </tr>
                    <tr>
                        <td class="main_tdbor"></td>
                    </tr>


                    <tr>
                        <td class="font3 fftd">文档描述：<br/>
                            <textarea name="remark" cols="88" rows="11" id="content"
                                      v-model="formData.remark"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="main_tdbor"></td>
                    </tr>

                    <tr>
                        <td class="font3 fftd">文档：<br/>
                            <input type="file" size="30" ref="fileId" @change="getFile"/>
                            <!--            <el-upload-->
                            <!--                    class="upload-demo"-->
                            <!--                    action="https://jsonplaceholder.typicode.com/posts/"-->
                            <!--                    :on-change="handleChange"-->
                            <!--                    :file-list="fileList">-->
                            <!--              <el-button size="small">点击上传</el-button>-->
                            <!--                            </el-upload>-->
                        </td>
                    </tr>
                    <tr>
                        <td class="main_tdbor"></td>
                    </tr>


                    <tr>
                        <td class="font3 fftd">
                            <input type="button" id="btn" value="上传" @click="submit">
                            <input type="reset" value="重置" @click="back">
                        </td>
                    </tr>
                    <tr>
                        <td class="main_tdbor"></td>
                    </tr>


                </table>

            </td>
        </tr>
    </table>
    <div style="height:10px;"></div>
</div>

<script>
    new Vue({
        el: '#addfile',
        data: {
            formData: {
                title: '',
                remark: '',
                file: null
            },
        },
        methods: {
            back: function () {
                this.formData.title = '';
                this.formData.remark = '';
                this.$refs.fileId.value=''
            },
            submit: function () {
                this.getFile();
                if (this.formData.title !== '' || this.formData.remark !== '') {
                    axios.post('/api/file/add', this.objToFormData(this.formData))
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(res.data.msg)
                                setTimeout(() => window.location.replace('document.html'), 1500);
                            } else if (res.data.msg) {
                                this.$message.error(res.data.msg);
                            } else {
                                this.$message.error('系统错误');
                            }
                        })
                } else {
                    this.$message.error('标题或详情不能为空')
                }
            },
            getFile() {
                this.formData.file = this.$refs.fileId.files[0];
                console.log(this.formData.file);
            },
            objToFormData(obj) {
                let formData = new FormData()
                for (let k in obj) {
                    if (obj[k] != null && obj[k] !== undefined) {
                        formData.append(k, obj[k] || "");
                    }
                }
                return formData;
            },
        }
    })
</script>
</body>
</html>